<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-07 15:25:39
-->
<template>
  <!--1. 容器 -->
  <div ref="left2_container" style="height: 85%"></div>
</template>
<script>
import { Column } from '@antv/g2plot';



   export default {
  data() {
    return {
      dataArr: [
        {
          type: "家具家电",
          sales: 38,
        },
        {
          type: "粮油副食",
          sales: 52,
        },
        {
          type: "生鲜水果",
          sales: 61,
        },
        {
          type: "美容洗护",
          sales: 145,
        },
        {
          type: "母婴用品",
          sales: 48,
        },
      ],
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const columnPlot = new Column(this.$refs.left2_container, {
        data: this.dataArr,
        xField: "type",
        yField: "sales",
//         //悬浮框提示
//         tooltip:{
//           fields:['ratio','sales'],
//           domStyles:{
//             'g2-tooltip':{
//               padding:'5px',
//               background:'rgba(47,6,170,0.8)',
//               color:'#f3f3f3',
//               fontsize:'18px'
//             }
//           }

//         },

//         //修改x轴文本
//         xAxis:{
//           label
//         }
      });
      //4.渲染图像
      columnPlot.render();
    },
  },
};

</script>